<%@ page import="ar.com.photo_admin.domain.Message"%>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="layout" content="main">
</head>
<body>
	<div class="container">

		<div class="page-header">
			<h1>
				<g:message code="messages.label" />
			</h1>
		</div>

		<g:if test="${flash.message}">
			<div class="alert alert-success">
				<a class="close" data-dismiss="alert">×</a>
				${flash.message}
			</div>
		</g:if>
		<g:if test="${flash.error}">
			<div class="alert alert-error">
				<a class="close" data-dismiss="alert">×</a>
				${flash.error}
			</div>
		</g:if>

		<g:link class="btn btn-success fl" action="create">
			<g:message code="messages.new" />
		</g:link>

		<g:form id="deleteMessagesForm" name="deleteMessagesForm"
			controller="message">
			
			<g:if test="${received}">
				<g:actionSubmit id="deleteButton" class="btn btn-danger fr"
					value="${message(code:'messages.trash.selected')}"
					action="deleteReceivedMessages" style="display : none" />
			</g:if>
			<g:elseif test="${sent}">
				<g:actionSubmit id="deleteButton" class="btn btn-danger fr"
					value="${message(code:'messages.delete.selected')}"
					action="deleteSentMessages" style="display : none" />
			</g:elseif>
			<g:elseif test="${trash}">
				<div class="btn-group fr">
					<g:actionSubmit id="deleteButton" class="btn btn-danger"
						value="${message(code:'messages.delete.selected')}"
						action="deleteTrashMessages" style="display : none" />
						
					<g:actionSubmit id="restoreButton" class="btn btn-primary"
						value="${message(code:'messages.restore.selected')}"
						action="restoreMessages" style="display : none" />
				</div>
			</g:elseif>

			<div class="cleaner"></div>
			<div class="separator"></div>

			<div class="row">

				<div class="span3">
					<ul class="nav nav-list">
						<li class="${received ? 'active' : ''}"><g:link
								action="received">
								<g:message code="messages.received" />
							</g:link></li>
						<li class="${sent ? 'active' : ''}"><g:link action="sent">
								<g:message code="messages.sent" />
							</g:link></li>
						<li class="${trash ? 'active' : ''}"><g:link action="trash">
								<g:message code="messages.trash" />
							</g:link></li>
					</ul>
				</div>

				<div class="span9">
					<g:if test="${messages}">
						<table class="table">
							<thead>
								<tr>
									<th>
										<g:checkBox id="select_all" name="select_all"
												value="${false}" onClick="selectAll();" />
									</th>
									<g:if test="${received || trash}">
										<th>
											${message(code: 'messages.from')}
										</th>
									</g:if>
									<g:if test="${sent}">
										<th>
											${message(code: 'messages.to')}
										</th>
									</g:if>
									<th>
										${message(code: 'messages.suject')}
									</th>
									<th>
										${message(code: 'messages.date')}
									</th>
								</tr>
							</thead>
							<tbody>

								<g:each in="${messages}" status="i" var="msg">
									<tr class="${!msg.userMessage?.notified && !sent ? 'info' : '' }">
										<td><g:checkBox id="message_${msg?.id}" name="message_${msg?.id}"
												value="${false}" onClick="checkButtons();" /></td>
										<g:if test="${received || trash}">
											<td><g:link controller="user" action="publicProfile"
													id="${msg?.from?.id}">
													${msg?.from?.username}
												</g:link></td>
										</g:if>
										<g:if test="${sent}">
											<td><g:link controller="user" action="publicProfile"
													id="${msg?.userMessage?.to?.id}">
													${msg?.userMessage?.to?.username}
												</g:link></td>

										</g:if>
										<td><g:link action="show" id="${msg?.id}">
												${msg?.subject}
											</g:link></td>
										<td><g:formatDate format="dd-MM-yyyy"
												date="${msg?.dateCreated}" /></td>
									</tr>
								</g:each>

							</tbody>

						</table>
						
						<div class="pagination">
							<g:paginate action="${action}" total="${messages.totalCount}" />	
						</div>	
					</g:if>
					<g:else>
						<div class="alert alert-warning">
							<a class="close" data-dismiss="alert">×</a>
							<g:message code="messages.no" />
						</div>
					</g:else>
				</div>
			</div>

		</g:form>
	</div>

	<div class="separator"></div>

	<script type="text/javascript">
     
		jQuery(document).ready(function(){
	   	});
	   	
		function checkButtons() {
			if (jQuery('input[name^="message_"]').is(':checked')) {
				if ('${trash}')
					jQuery("#restoreButton").show();
				jQuery("#deleteButton").show();
			}
			else {
				if ('${trash}')
					jQuery("#restoreButton").hide();
				jQuery("#deleteButton").hide();
			}
				
			updateSelectAllState();
		}
		
		function selectAll() {
			var value = jQuery('#select_all').is(':checked');
		
			jQuery('input[name^="message_"]').prop('checked', value);
			
			checkButtons();
		}
		
		function updateSelectAllState() {
			var value = jQuery('input[name^="message_"]').is(':checked')
			jQuery('#select_all').prop('checked', value);
		}
	   	
    </script>
</body>
</html>